<template>
  <div class="water">
    <!-- 头部 -->
    <div class="box">
      <el-input
        v-model="value"
        placeholder="Please input"
        class="input-with-select"
      >
        <template #append>
          <el-button :icon="Search" @click="search(value)" />
        </template>
      </el-input>
      <el-button type="primary" @click="cancel">批量取消</el-button>
    </div>
    <!-- 表格组件 -->
    <OrderTable
      @changeFlag="changeItem"
      @edit="editItem"
      :currentPage="currentPage"
      :pageSize="pageSize"
      @del="delitem"
      :tableData="store.$state.pageData"
    ></OrderTable>
    <!-- 分页 -->
    <div>
      <!-- 分页 -->
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 15]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="store.$state.data.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 弹出框 -->
    <el-dialog
      v-model="dialogVisible"
      title="Tips"
      width="30%"
      :before-close="handleClose"
    >
      <div>
        <el-form :model="form" label-width="120px">
          <el-form-item label="出发地">
            <el-input v-model="form.name" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import OrderTable from "@/components/OrderTable.vue";
import { onMounted, ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
import { Search } from "@element-plus/icons-vue";
/* 1，引入对应的store模块 */
import { useStore } from "@/store/index";
/* 2，实例化 */
let store = useStore();

const router = useRouter();
const value = ref("");
const form = reactive({
  name: "",
});
console.log(form);
const dialogVisible = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const background = ref(false);
const disabled = ref(false);
const values = ref({});

const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
// 点击跳转页面
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
  store.page({ val, pageSize: pageSize.value });
};

onMounted(() => {
  store.getList({ pageSize: pageSize.value });
});

// 搜索
const search = (val) => {
  store.searchNum(val);
};

// 删除
const delitem = (id, index, currentPage, pageSize) => {
  store.del(id, index, currentPage, pageSize);
};

const handleClose = (done) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};
// 编辑
const editItem = ({ id, index, currentPage, pageSize, row }) => {
  // console.log(id, index, currentPage, pageSize,row);
  dialogVisible.value = true;
  form.name = row.startLocation;
  values.value = row;
};

// 点击确定
const confirm = () => {
  dialogVisible.value = false;
  // console.log(form.name);
  store.edit({ values, val: form.name });
};

// 批量取消
const cancel = () => {
  store.checkAll();
};

// const changeItem = (flag) => {
//   console.log(flag);
//   store.checkf(flag)
// }
</script>

<style scoped>
.box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 35px;
  background: white;
}
.input-with-select {
  width: 30%;
}
.water {
  width: 100%;
  height: 100%;
}
</style>